<template>
    <div v-show="visible" class="Progress" :style="{width: _width, height: _height, animationDuration: _speed}">
        <div class="Inner" :style="{backgroundColor: innerColor}"></div>
    </div>
</template>

<script>
export default {
    props: {
        size: {
            required: false,
            type: Number,
            default: 100
        },
        duration: {
            required: false,
            type: Number,
            default: 1.5
        },
        visible: {
            require: false,
            type: Boolean,
            default: true
        },
        innerColor: {
            require: false,
            type: String,
            default: "white"
        }
    },
    computed: {
        _width(){
            return this.size + "px"
        },
        _height() {
            return this._width
        },
        _speed(){
            return this.duration + "s"
        }
    },
    created(){
        
    }
}
</script>


<style lang="scss" scoped>

$color-fore: white;
$color-primary: #3BA776;

// $width: 500px;
// $height: $width;
$border-radius:40%;

.Progress {
//   width: $width;
//   height: $height;
  text-align: center;

  animation: {
    name: Progress;
    // duration: 1.5s;
    iteration-count: infinite;
  }

  border: {
    radius: $border-radius;
  }
}

@keyframes Progress {
  @for $i from 0 through 100 {
    #{$i}% {
      background: linear-gradient(#{$i * 3.6}deg,$color-fore,$color-fore, $color-fore, $color-fore, $color-fore, $color-primary,$color-primary);
    }
  }
}

.Inner {
  margin-top: 10%;
  display: inline-block;
  width: 80%;
  height: 80%;
//   background-color: white;

  border: {
    radius: $border-radius;
  }

  text-align: center;
}
</style>
